<template>
  <div class="project-org">
    <div class="project-org-head">
      <div class="project-org-head__title">五方主体</div>
    </div>

    <div class="project-org-list">
      <div class="org-item" v-for="(item,index) in list" :key="index">
        <div class="org-item-left">{{ item.type }}</div>
        <div class="org-item-right">
          <div class="org-item-title">{{ item.name }}</div>
          <div class="org-item-line">
            <div class="org-item-line-item" v-if="item.charger">
              负责人：{{ item.charger }}
            </div>
            <div class="org-item-line-item" v-if="item.tel">
              <i class="el-icon-phone"></i>
              {{ item.tel }}
            </div>
          </div>

          <div class="org-item-tag" v-if="item.tag">{{item.tag}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'project-org',
  cnName: '项目-五方主体',
  data() {
    return {
      list: [
        {type: '建设单位', name: '中建三局集团有限公司', charger: '王大川', tel: '13489646498'},
        {type: '施工单位', name: '中建三局集团有限公司', charger: '王大川', tel: '13489646498', tag: '施工总承包单位特级'},
        {type: '监理单位', name: '天津市建设工程监理公司', charger: '王大川', tel: '13489646498', tag: '房屋建筑工程甲级'},
        {type: '勘察单位', name: '中衡设计集团股份有限公司'},
        {type: '设计单位', name: '中衡设计集团股份有限公司'}
      ]
    }
  },
  methods: {

  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.project-org {
  padding: 10px 20px;
  height: 100%;
  overflow: auto;

  &-head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    &__title {
      font-weight: 650;
      font-size: 32px;
    }
  }

  &-list {
    width: 750px;

    .org-item {
      border: 1px solid #2391FF;
      height: 110px;
      display: flex;
      margin-bottom: 20px;

      &-left {
        width: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: #80FCFD;
        font-weight: 500;
        border-right: 1px solid #2391ff;
        background-image: linear-gradient(180deg, rgba(35,145,255,.23), rgba(35,145,255, .16));
      }

      &-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 20px;
        position: relative;
      }

      &-title {
        font-size: 22px;
      }

      &-line {
        display: flex;

        &-item {
          margin-right: 15px;
        }
      }

      &-tag {
        position: absolute;
        border: 1px solid #80fcfd;
        border-radius: 4px;
        font-size: 18px;
        right: 10px;
        top: 20px;
        padding: 3px 5px;
      }
    }
  }
}
</style>
